import { createStore } from "vuex";

const vuexLocalStorage = (store) => {
  // 在每次 mutation 后将 state 存储到 localStorage
  store.subscribe((mutation, state) => {
    localStorage.setItem("vuex", JSON.stringify(state));
  });

  // 从 localStorage 中恢复状态
  const savedState = localStorage.getItem("vuex");
  if (savedState) {
    const parsedState = JSON.parse(savedState);

    // 检查 `historylist` 是否是数组
    if (!Array.isArray(parsedState.historylist)) {
      parsedState.historylist = [];
    }

    // 使用 `replaceState` 恢复状态
    store.replaceState(parsedState);
  }
};

const store = createStore({
  state: {
    bg_img_url: null, //背景图片名称
    bg_amount: 0, //背景图片模糊度
    bg_opacity: 1, //背景蒙层透明度
    search_height: 50, //搜索栏高度
    search_radius: 10, //搜索栏圆度
    search_width: 8, //搜索栏圆度
    search_transparency: 100, //搜索栏透明度
    newtab: false,
    history: false,
    historylist: [],
    search: {},
    dock: null,
    box_gap: 20,
    square_size: 55,
    radius: 20,
    fontcolor: "#000000",
    vide: false, //是否设置视频背景
    shouldFocus: false, //是否自动聚焦
    sidebars: false, //页面旁边的侧边栏
    showaddurl: false,
    navid: null,
    navconfig: [],
  },
  mutations: {
    amount(state, value) {
      state.bg_amount = value;
    },
    opacity(state, value) {
      state.bg_opacity = value;
    },
    imgUrl(state, value) {
      state.bg_img_url = value;
    },
    searchHeight(state, value) {
      state.search_height = value;
    },
    searchWidth(state, value) {
      state.search_width = value;
    },
    searchRadius(state, value) {
      state.search_radius = value;
    },
    searchTransparency(state, value) {
      state.search_transparency = value;
    },
    //搜索是否打开新页面
    newtab(state, value) {
      state.newtab = value;
    },
    //是否打开搜索记录
    history(state, value) {
      state.history = value;
    },
    //添加记录
    historylist(state, value) {
      const searchValue = value.search;
      // 如果历史列表为空，直接添加
      if (state.historylist.length === 0) {
        state.historylist.unshift(value);
        return;
      }
      // 如果新内容与首项的 search 属性相同，则不进行任何操作
      if (state.historylist[0].search === searchValue) {
        return;
      }
      // 查找是否已存在该搜索项
      const index = state.historylist.findIndex(
        (item) => item.search === searchValue
      );
      if (index !== -1) {
        // 如果存在，删除原位置的该项，并将其移至首项
        state.historylist.splice(index, 1);
        state.historylist.unshift(value);
      } else {
        // 如果不在历史数组中，确保数组长度不超过 10
        if (state.historylist.length >= 10) {
          state.historylist.pop(); // 删除最后一个元素
        }
        // 将新内容添加到首项
        state.historylist.unshift(value);
      }
    },
    //删除记录
    deleteSearchRecord(state, searchValue) {
      // 查找要删除的记录的索引
      const index = state.historylist.findIndex(
        (item) => item.search === searchValue
      );
      if (index !== -1) {
        // 如果找到，删除该记录
        state.historylist.splice(index, 1);
      }
    },
    //情况搜索记录
    clearhistorylist(state) {
      state.historylist = [];
    },
    //搜索引擎
    search(state, value) {
      state.search = value;
    },
    dock(state, value) {
      state.dock = value;
    },
    setGap(state, value) {
      state.box_gap = value;
    },
    setSquareSize(state, value) {
      state.square_size = value;
    },
    setradius(state, value) {
      state.radius = value;
    },
    //设置字体颜色
    setfontcolor(state, value) {
      state.fontcolor = value;
    },
    setvide(state, value) {
      state.vide = value;
    },
    setshouldFocus(state, value) {
      state.shouldFocus = value;
    },
    setsidebars(state, value) {
      state.sidebars = value;
    },
    setshowaddurl(state, value) {
      state.showaddurl = value;
    },
    setnavconfig(state, value) {
      state.navconfig = value;
    },
    setnavid(state, value) {
      state.navid = value;
    },
    ADD_CHILD_TO_NAV(state, { navId, newchild }) {
      const menu = state.navconfig?.find((m) => m.id === navId);
      console.log("menu", menu);
      console.log("menu", newchild);
      if (menu) {
        menu.children = newchild;
      }
    },
  },
  actions: {},
  getters: {
    getamount(state) {
      return state.bg_amount;
    },
    getopacity(state) {
      return state.bg_opacity;
    },
    getimgUrl(state) {
      return state.bg_img_url;
    },
    getSearchHeight(state) {
      return state.search_height;
    },
    getsearchWidth(state) {
      return state.search_width;
    },
    getSearchRadius(state) {
      return state.search_radius;
    },
    getSearchTransparency(state) {
      return state.search_transparency;
    },
    getnewtab(state) {
      return state.newtab;
    },
    gethistory(state) {
      return state.history;
    },
    gethistorylist(state) {
      return state.historylist;
    },
    getsearch(state) {
      const defaultSearch = {
        name: "百度",
        icon: chrome.runtime.getURL("assets/icon/baidu.svg"),
        search: "https://www.baidu.com/s?&tn=68018901_2_oem_dg&ie=utf-8&wd=",
      };
      if (!state.search || Object.keys(state.search).length === 0) {
        return defaultSearch;
      }
      return state.search;
    },
    getdock(state) {
      return state.dock;
    },
    getboxgap(state) {
      return state.box_gap;
    },
    getsquareSize(state) {
      return state.square_size;
    },
    getradius(state) {
      return state.radius;
    },
    //获取字体颜色
    getfontcolor(state) {
      return state.fontcolor;
    },
    getvide(state) {
      return state.vide;
    },
    getshouldFocus(state) {
      return state.shouldFocus;
    },
    getsidebars(state) {
      return state.sidebars;
    },
    getshowaddurl(state) {
      return state.showaddurl;
    },
    getstate(state) {
      return state;
    },
    getnavconfig(state) {
      return state.navconfig;
    },
    getnavid(state) {
      return state.navid;
    },
  },
  plugins: [vuexLocalStorage],
});

export default store;
